﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0058)http://js.mobanwang.com/source/201106/201106133/index.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jQuery简单实现鼠标经过小图显示大图-模板王</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=description content="Easiest jQuery Tooltip Ever">
<SCRIPT type=text/javascript src="index_files/jquery.js"></SCRIPT>

<SCRIPT type=text/javascript src="index_files/main.js"></SCRIPT>
</META>
<STYLE>BODY {
	PADDING-BOTTOM: 40px; MARGIN: 0px; PADDING-LEFT: 40px; PADDING-RIGHT: 40px; FONT: 80%/180% Arial, Helvetica, sans-serif; BACKGROUND: #fff; COLOR: #555; PADDING-TOP: 40px
}
H1 {
	COLOR: #555; FONT-SIZE: 180%; FONT-WEIGHT: normal
}
H2 {
	PADDING-BOTTOM: 0.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; COLOR: #555; CLEAR: both; FONT-SIZE: 160%; FONT-WEIGHT: normal; PADDING-TOP: 0.5em
}
A {
	COLOR: #f30; TEXT-DECORATION: none
}
P {
	PADDING-BOTTOM: 0.5em; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; CLEAR: both; PADDING-TOP: 0.5em
}
PRE {
	BORDER-BOTTOM: #bae2f0 1px solid; BORDER-LEFT: #bae2f0 1px solid; PADDING-BOTTOM: 10px; MARGIN: 0.5em 0px; PADDING-LEFT: 10px; WIDTH: 800px; PADDING-RIGHT: 10px; DISPLAY: block; FONT: 100% "Courier New", Courier, monospace; BACKGROUND: #e3f4f9; OVERFLOW: auto; BORDER-TOP: #bae2f0 1px solid; BORDER-RIGHT: #bae2f0 1px solid; PADDING-TOP: 10px
}
IMG {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
UL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
	LIST-STYLE-TYPE: none; DISPLAY: inline; FLOAT: left; LIST-STYLE-IMAGE: none; MARGIN-RIGHT: 10px
}
#preview {
	BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BORDER-LEFT: #ccc 1px solid; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; DISPLAY: none; BACKGROUND: #333; COLOR: #fff; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid; PADDING-TOP: 5px
}
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.7601.17874"></HEAD>
<BODY>
<H1>jQuery简单实现鼠标经过小图显示大图</H1>
<UL>
  <LI><A class=preview title="Lake and a mountain" 
  href="http://js.mobanwang.com/source/201106/201106133/1.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/1s.jpg"></A></LI>
  <LI><A class=preview title="Fly fishing" 
  href="http://js.mobanwang.com/source/201106/201106133/2.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/2s.jpg"></A></LI>
  <LI><A class=preview title=Autumn 
  href="http://js.mobanwang.com/source/201106/201106133/3.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/3s.jpg"></A></LI>
  <LI><A class=preview title="Skiing on a mountain" 
  href="http://js.mobanwang.com/source/201106/201106133/4.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/4s.jpg"></A></LI></UL>
<H2>无标题</H2>
<UL>
  <LI><A class=preview 
  href="http://js.mobanwang.com/source/201106/201106133/1.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/1s.jpg"></A></LI>
  <LI><A class=preview 
  href="http://js.mobanwang.com/source/201106/201106133/2.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/2s.jpg"></A></LI>
  <LI><A class=preview 
  href="http://js.mobanwang.com/source/201106/201106133/3.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/3s.jpg"></A></LI>
  <LI><A class=preview 
  href="http://js.mobanwang.com/source/201106/201106133/4.jpg"><IMG 
  alt="gallery thumbnail" src="index_files/4s.jpg"></A></LI></UL>
<H2>带标题</H2>
<DIV style="MARGIN: 20px auto; WIDTH: 550px">
<P><STRONG><A href="http://js.mobanwang.com/" target=_blank>模板王整理</A></STRONG> 
</P>
<P>转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</P></DIV></BODY></HTML>
